var box = document.querySelector('.main')
var leftBtn = document.querySelector('.left')
var rightBtn = document.querySelector('.right')
var ul1 = document.querySelector('.ul1')
var ul2 = document.querySelector('.ul2')
var ulbox = document.querySelector('.main-top') 
var uls = document.querySelector('.main-uls')
var xuans = document.getElementsByName('xuan')
var allul = uls.children
var srollbox = document.querySelector('.main-like .w')

var dsq


//给大盒子绑定点击事件
box.onclick = function(e){
    var e = e || window.event
    var tg = e.target || e.srcElement

    // 切换
    if(tg.className == "right"){
        srollbox.scrollTo({
            left:998,
            behavior:"smooth"

        })
        
    }

    if(tg.className == "left"){
        srollbox.scrollTo({
            left:0,
            behavior:"smooth"

        })
        
    }

    
    
    //加入购物车
    if(tg.className == "car"){
        var li = tg.parentNode
        var list = li.children
        var url  = list[0].getAttribute("src")
        var title = list[1].innerHTML
        var price = list[2].innerHTML
        
        //创建新ul
        var newul = document.createElement('ul')
        newul.innerHTML=`
            <li>
            <input type="checkbox" name="xuan"> 
            </li>
            <li>
                <img src="${url}" alt="">
                <p>${title}</p>
            </li>
            <li>${price}</li>
            <li>
                <button>-</button>
                <input type="text" value="1">
                <button>+</button>
            </li>
            <li>${price}</li>
            <li>删除</li>
        `
        uls.appendChild(newul)

        total()
        xuan()
        shop()
    }

    //删除
    if(tg.innerHTML == '删除'){
       tg.parentNode.remove()

       xuan()
       total()
       shop()
    }

    //加法
    if(tg.innerHTML == "+"){
        var num = tg. previousElementSibling.value
        num++
        tg. previousElementSibling.value = num
        var lis = tg.parentNode.parentNode.children
        var price = lis[2].lastElementChild.innerHTML
        var sum = price*num
        lis[4].lastElementChild.innerHTML = sum.toFixed(2)

        total()
    }

    //减法
    if(tg.innerHTML == "-"){
        var num = tg. nextElementSibling.value
        //判断是否小于1
        num <= 1?num = 1:num--
        tg. nextElementSibling.value = num
        var lis = tg.parentNode.parentNode.children
        var price = lis[2].lastElementChild.innerHTML
        var sum = price*num
        lis[4].lastElementChild.innerHTML = sum.toFixed(2)

        total()
    }

    //清理购物车
    if(tg.innerHTML == "清理购物车"){
       var allul2 = Array.from(allul)
        allul2.forEach((item,index)=>{
            item.remove()
        });

        xuan()
        total()
        shop()

    }

    //删除选中的商品
    if(tg.innerHTML == "删除选中的商品"){
        for(let i=0;i<xuans.length;i++){
            //判断当前选中框是否被选中
            if(xuans[i].checked){
                xuans[i].parentNode.parentNode.remove()
                i--
            }
        }
        total()
        xuan()
        shop()
    }

    //全选
    if(tg.name == "quan"){
        for(let i = 0; i < xuans.length; i++){
            if(tg.checked){
                xuans[i].checked=true
            }else{
                xuans[i].checked=false
            }
        }

        total()
        shop()
    }

    
    //选中框
    if(tg.name == 'xuan'){
        xuan()
        total()
        shop()
    }

}

function xuan(){
    var num = 0
    for(var i = 0; i < xuans.length; i++){
        if(xuans[i].checked){
            num++
        }
        
    }

    if(num == xuans.length){
        var quans = document.querySelectorAll('[name="quan')
        quans[0].checked = true
        quans[1].checked = true
    }else{
        var quans = document.querySelectorAll('[name="quan')
        quans[0].checked = false
        quans[1].checked = false
    }
}

function total(){
    var m = 0
    var sum = 0
    for(var i = 0; i < allul.length; i++){
        if(allul[i].children[0].lastElementChild.checked){
            var ji = allul[i].children[4].lastElementChild.innerHTML
            sum+=parseFloat(ji)
            var mm = allul[i].children[3].children[1].value
            m += parseInt(mm)
        }
    }
    
    var dd = document.querySelector('.footer-right')
    dd.children[0].lastElementChild.innerHTML = m
    dd.children[1].lastElementChild.innerHTML =sum.toFixed(2)
}

function shop (){
    
    document.querySelector('.peisong').children[0].lastElementChild.innerHTML=allul.length
     
}
shop()
// debugger
// function move(){
//     var start = ul2.offsetLeft
//     var end = ul1.offsetLeft
//     var speed = -50
//     if(start <= end){
//         clearInterval(dsq)
//     }else{
//         ul1.offsetLeft = start + speed +"px"
//     }
    

// }



